<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>arrow</title>
</head>
<body>
<div id="container"></div>
<script type="module">
    import Konva from "konva";

    var width = window.innerWidth;
    var height = window.innerHeight;

    let stage = new Konva.Stage({container: 'container', width: width, height: height});
    let layer = new Konva.Layer();
    stage.add(layer);

    let arrow = new Konva.Arrow({
        x: width / 3,
        y: height / 3,
        points: [10, 10, 200, 10, 200, 500],
        pointerWidth: 20,
        pointerLength: 20,
        stroke: 'lightblue',
        strokeWidth: 10,
        draggable: true
    });
    layer.add(arrow)
</script>
</body>
</html>
